<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>0</li>
      <li><a href="#">又是一个a标签</a> <b>123</b></li>
      <li>2</li>
      <li><a href="#">一个a标签</a></li>
      <li>4</li>
    </ul>
  </body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(function () {
    //jquery的属性不能和原生js元素的属性混用
    //jquery的规律 使用属性的时候 都要用函数调用的方式 就是加上小括号
    //jquery元素和普通dom元素转换
    //1. get(0)  2.[0]
    console.log($("li").first());
    let li = $("li:eq(2)").prev(); //选择索引为2的元素的上一个兄弟元素
    console.log(li);
    // 将li这个jquery元素变成普通的的dom元素
    // console.log(li[0]);
    console.log(li.get(0));
    console.log($(li));
    // nextAll() 获取当前元素后面的所有兄弟元素
    console.log($("li:eq(2)").nextAll());
    // prevAll() 获取当前元素前面的所有兄弟元素
    console.log($("li:eq(4)").prevAll());
    //获取父元素
    console.log($("li").parent());
    let u = $("li").parent().parent().parent().parent();
    console.log(u.get(0));
    //获取元素的父元素们
    console.log($("li").parents());
    //find(selector) 从父级元素中 找到某个子级元素
    console.log($("ul").find("a:eq(1)"));
  });
</script>
